<template>
	<view>
		<u-navbar title-color="#333" title-bold title-size="36" title="会员权益" :border-bottom="false"></u-navbar>
		<view class="uni-margin-wrap">
			<swiper @change="swchange" class="swiper" circular indicator-dots indicator-active-color="#D3A358"
				indicator-color="#E6E3DE " :current="current">
				<swiper-item v-for="(item,index) in datalist" :key="index">
					<view class="swiper-item " :class="'swiper-item-s'+(index+1)">
						<image class="hyimg" :src="'../../static/img/mine/hy-'+(index+1)+'.png'" mode=""></image>
						<view class="hy-div">
							<view class="flex flex_sb" v-if="userInfo.level==item.id">
								<view  class="yxq" :class="'col'+(index+1)">有效期至{{userInfo.level_time}}</view>
								<view class="dengji">当前等级</view>
							</view>
							<view class="hydj u-m-t-40" :class="'col'+(index+1)">{{item.name}}</view>
							<view class="hx">
								<view class="hx1" :class="'bgcol'+(index+1)"></view>
							</view>
							<view class=" u-m-t-40 flex flex_end u-m-r-28">
								<view class="jilu" @click="toJilu">开通记录 ></view>
							</view>
						</view>
					</view>
				</swiper-item>
				<!-- <swiper-item>
					<view class="swiper-item ">
						<image class="hyimg" src="../../static/img/mine/hy-2.png" mode=""></image>
						<view class="hy-div">
							<view class="flex flex_sb">
								<view class="yxq col2">有效期至2023.12.22</view>
								<view class="dengji">当前等级</view>
							</view>
							<view class="hydj u-m-t-40 col2">白金会员</view>
							<view class="hx">
								<view class="hx1 bgcol2"></view>
							</view>
							<view class=" u-m-t-40 flex flex_end u-m-r-28">
								<view class="jilu" @click="toJilu">开通记录 ></view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image class="hyimg" src="../../static/img/mine/hy-3.png" mode=""></image>
						<view class="hy-div">
							<view class="flex flex_sb">
								<view class="yxq col3">有效期至2023.12.22</view>
								<view class="dengji">当前等级</view>
							</view>
							<view class="hydj u-m-t-40 col3">黄金会员</view>
							<view class="hx">
								<view class="hx1 bgcol3"></view>
							</view>
							<view class=" u-m-t-40 flex flex_end u-m-r-28">
								<view class="jilu" @click="toJilu">开通记录 ></view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image class="hyimg" src="../../static/img/mine/hy-4.png" mode=""></image>
						<view class="hy-div">
							<view class="flex flex_sb">
								<view class="yxq col4">有效期至2023.12.22</view>
								<view class="dengji">当前等级</view>
							</view>
							<view class="hydj u-m-t-40 col4">黄金会员</view>
							<view class="hx">
								<view class="hx1 bgcol4"></view>
							</view>
							<view class=" u-m-t-40 flex flex_end u-m-r-28">
								<view class="jilu" @click="toJilu">开通记录 ></view>
							</view>
						</view>
					</view>
				</swiper-item> -->
			</swiper>
		</view>
		<view class="hyqx">
			<view class="flex">
				<image class="hyi1" src="../../static/img/mine/hyi1.png" mode=""></image>
				<view class="font_weight font_16_333 u-m-l-12">
					会员权益
				</view>
			</view>
			<view class="u-m-t-24">
				<u-table>
					<u-tr>
						<u-th>权益汇总</u-th>
						<u-th v-for="(item,index) in datalist" :key="index" :class="current==index?'thsel':''">{{item.name}}</u-th>
						<!-- <u-th :class="current==1?'thsel':''">白金</u-th>
						<u-th :class="current==2?'thsel':''">荣耀</u-th>
						<u-th :class="current==3?'thsel':''">王者</u-th> -->
					</u-tr>
					<u-tr class="h52">
						<u-td>免费咨询</u-td>
						<u-td v-for="(item,index) in datalist" :key="index" :class="current==index?'tdsel':''">
							<image v-if="item.free_seek==1" class="hyi2" src="../../static/img/mine/hyi2.png" mode=""></image>
						</u-td>
						<!-- <u-td :class="current==1?'tdsel':''">
							<image class="hyi2" src="../../static/img/mine/hyi2.png" mode=""></image>
						</u-td>
						<u-td :class="current==2?'tdsel':''">
							<image class="hyi2" src="../../static/img/mine/hyi2.png" mode=""></image>
						</u-td>
						<u-td :class="current==3?'tdsel':''">
							<image class="hyi2" src="../../static/img/mine/hyi2.png" mode=""></image>
						</u-td> -->
					</u-tr>
					<u-tr class="h52">
						<u-td>AI助手</u-td>
						<u-td v-for="(item,index) in datalist" :key="index" :class="current==index?'tdsel':''">
							<span v-if="item.ai_assistant==1" class="tdtext">试用{{item.ai_month}}个月</span>
						</u-td>
						<!-- <u-td :class="current==0?'tdsel':''"><span class="tdtext">试用1个月</span></u-td>
						<u-td :class="current==1?'tdsel':''">
							<image class="hyi2" src="../../static/img/mine/hyi2.png" mode=""></image>
						</u-td>
						<u-td :class="current==2?'tdsel':''">
							<image class="hyi2" src="../../static/img/mine/hyi2.png" mode=""></image>
						</u-td>
						<u-td :class="current==3?'tdsel':''">
							<image class="hyi2" src="../../static/img/mine/hyi2.png" mode=""></image>
						</u-td> -->
					</u-tr>
					<u-tr class="h78">
						<u-td>律师课程</u-td>
						<u-td v-for="(item,index) in datalist" :key="index" :class="current==index?'tdsel':''">
							<span v-if="item.lesson_type==1" class="tdtext">0元课程</span>
							<span v-if="item.lesson_type==2" class="tdtext">资深律师课程</span>
							<span v-if="item.lesson_type==3" class="tdtext">合伙人课程</span>
							<span v-if="item.lesson_type==4" class="tdtext">高级合伙人律师课程</span>
						</u-td>
						<!-- <u-td :class="current==0?'tdsel':''"><span class="tdtext">0元课程</span></u-td>
						<u-td :class="current==1?'tdsel':''"><span class="tdtext">资深律师课程</span></u-td>
						<u-td :class="current==2?'tdsel':''"><span class="tdtext">合伙人课程</span></u-td>
						<u-td :class="current==3?'tdsel':''"><span class="tdtext">高级合伙人律师课程</span></u-td> -->
					</u-tr>
					<u-tr class="h78">
						<u-td>
							私享会 <br />
							<span class="font_10_999">律师1对1指导</span>
						</u-td>
						<u-td v-for="(item,index) in datalist" :key="index" :class="current==index?'tdsel':''">
							<image v-if="item.private_meeting==1" class="hyi2" src="../../static/img/mine/hyi2.png" mode=""></image>
						</u-td>
						<!-- <u-td :class="current==0?'tdsel':''"></u-td>
						<u-td :class="current==1?'tdsel':''"><span class="tdtext">1次/年</span></u-td>
						<u-td :class="current==2?'tdsel':''"><span class="tdtext">3次/年</span></u-td>
						<u-td :class="current==3?'tdsel':''"><span class="tdtext">6次/年</span></u-td> -->
					</u-tr>
					<u-tr class="h52">
						<u-td>双倍积分</u-td>
						<u-td v-for="(item,index) in datalist" :key="index" :class="current==index?'tdsel':''">
							<image v-if="item.double_score==1" class="hyi2" src="../../static/img/mine/hyi2.png" mode=""></image>
						</u-td>
						<!-- <u-td :class="current==0?'tdsel':''"></u-td>
						<u-td :class="current==1?'tdsel':''">
							<image class="hyi2" src="../../static/img/mine/hyi2.png" mode=""></image>
						</u-td>
						<u-td :class="current==2?'tdsel':''">
							<image class="hyi2" src="../../static/img/mine/hyi2.png" mode=""></image>
						</u-td>
						<u-td :class="current==3?'tdsel':''">
							<image class="hyi2" src="../../static/img/mine/hyi2.png" mode=""></image>
						</u-td> -->
					</u-tr>
					<u-tr class="h52">
						<u-td>分销提成</u-td>
						<u-td v-for="(item,index) in datalist" :key="index" :class="current==index?'tdsel':''">
							<image v-if="item.is_distribute==1" class="hyi2" src="../../static/img/mine/hyi2.png" mode=""></image>
						</u-td>
						<!-- <u-td :class="current==0?'tdsel':''"> </u-td>
						<u-td :class="current==1?'tdsel':''"></u-td>
						<u-td :class="current==2?'tdsel':''"></u-td>
						<u-td :class="current==3?'tdsel':''"></u-td> -->
					</u-tr>
					<u-tr class="h78">
						<u-td>常见法律顾问</u-td>
						<u-td v-for="(item,index) in datalist" :key="index" :class="current==index?'tdsel':''">
							<image v-if="item.consult==1" class="hyi2" src="../../static/img/mine/hyi2.png" mode=""></image>
						</u-td>
						<!-- <u-td :class="current==0?'tdsel':''"></u-td>
						<u-td :class="current==1?'tdsel':''"></u-td>
						<u-td :class="current==2?'tdsel':''"></u-td>
						<u-td :class="current==3?'tdsel':''"></u-td> -->
					</u-tr>
				</u-table>
			</view>
			<view class="youhui-div">
				<view class="yh-top flex">
					<image class="yh-top-icon" src="../../static/img/home/h-16.png" mode=""></image>
					<view class="yh-top-title">
						优惠福利
					</view>
					<view class="yh-top-jj">
						活动专享 限时优惠
					</view>
				</view>
				<view class="yh-top2" @click="toyouhui(1)">
					<image class="yh-top2-img" src="../../static/img/home/h-17.png" mode=""></image>
					<view class="yh-top2-title">
						积分兑换好礼
					</view>
					<view class="yh-top2-jj">
						参与赢取更多好礼，超多福利等你来！
					</view>
				</view>
				<view class="flex flex_sb u-m-t-20">
					<view class="yh3-1" @click="toyouhui(2)">
						<image class="yh3-1-img" src="../../static/img/home/h-18.png" mode=""></image>
						<view class="yh3-1-title">
							优惠券
						</view>
						<view class="yh3-1-jj">
							大额优惠券放送
						</view>
						<view class="yh3-1-btn">
							立即领取
						</view>
					</view>
					<view class="">
						<view class="yh3-2" @click="toyouhui(3)">
							<image class="yh3-2-img" src="../../static/img/home/h-19.png" mode=""></image>
							<view class="yh3-2-title">
								限时秒杀
							</view>
							<view class="yh3-2-jj">
								超值惊喜来袭
							</view>
							<view class="yh3-2-btn">
								立即领取
							</view>
						</view>
						<view class="yh3-3 u-m-t-20" @click="toyouhui(4)">
							<image class="yh3-3-img" src="../../static/img/home/h-20.png" mode=""></image>
							<view class="yh3-3-title">
								签到有礼
							</view>
							<view class="yh3-3-jj">
								签到领积分
							</view>
							<view class="yh3-3-btn">
								立即领取
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>

		<view class="zhanwei"></view>
		<view class="hy-btn-div">
			<view class="hy-btn" @click="toup">
				会员升级
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				datalist:[],
				userInfo:[]
			}
		},
		onLoad() {
			this.getList()
			this.getInfo()
		},
		methods: {
			//个人信息
			getInfo() {
				this.$api({
					url: '/getUserInfo',
					method: 'get',
					data: {
						token:uni.getStorageSync("token")
					},
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.userInfo = res.data
						
						if(this.userInfo.level>0){
							this.current = this.userInfo.level - 1
						}
					} 
				})
			},
			getList() {
				this.$api({
					url: '/custom_equity',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
					},
				}).then(res => {
					if (res.code == 1) {
						this.datalist = res.data
					}
				})
			},
			
			swchange(e) {
				this.current = e.target.current
				console.log(e.target.current)
			},
			toup(){
				uni.navigateTo({
					url:"/pages/mine/memberUp"
				})
			},
			toJilu(){
				uni.navigateTo({
					url:"/pages/mine/memberBuyList"
				})
			},
			toyouhui(e){
				if (e == 1) {
					uni.navigateTo({
						url: "/pages/mine/jifenShop?type=1"
					})
				} else if (e == 2) {
					uni.navigateTo({
						url: "/pages/mine/youhuiquanCenter?type=1"
					})
				} else if (e == 3) {
					// uni.navigateTo({
					// 	url: "/pages/mine/youhuiquanCenter"
					// })
				} else if (e == 4) {
					uni.navigateTo({
						url: "/pages/mine/singin?type=1"
					})
				} 
			},
		}
	}
</script>

<style scoped lang="scss">
	.zhanwei {
		width: 750rpx;
		height: 142rpx;
	}

	.hy-btn-div {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 142rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 8rpx 2rpx rgba(0, 0, 0, 0.14);
		padding: 24rpx 32rpx;

		.hy-btn {
			width: 686rpx;
			height: 92rpx;
			background: linear-gradient(177deg, #FFF7EA 0%, #ECA561 100%);
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			font-weight: bold;
			font-size: 36rpx;
			color: #773E00;
			text-align: center;
			line-height: 92rpx;
		}
	}

	.hyqx {
		padding: 32rpx;
		background-color: #FFFFFF;

		.hyi1 {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.u-th {
		font-size: 24rpx;
	}

	.u-td {
		font-size: 24rpx !important;
	}

	.thsel {
		background: linear-gradient(90deg, #FFEEC0 0%, #FCD885 100%);
	}

	.tdsel {
		background: #FEF9F1;
	}

	.h52 {
		height: 52rpx;
	}

	.h78 {
		height: 78rpx;
	}

	.w176 {
		width: 176rpx;
	}

	.tdtext {
		font-size: 20rpx;
		color: #FE8B24;
	}

	.hyi2 {
		width: 32rpx;
		height: 28rpx;
		margin: 0 auto;
	}


	.uni-margin-wrap {
		width: 750rpx;
		height: 396rpx;
	}

	.swiper {
		height: 396rpx;

		/deep/ .uni-swiper-dot-active {
			width: 30rpx;
			border-radius: 50px;
		}
	}

	.col2 {
		color: #913E00 !important;
	}

	.bgcol2 {
		background: #913E00 !important;
	}

	.col3 {
		color: #3630C3 !important;
	}

	.bgcol3 {
		background: #3630C3 !important;
	}

	.col4 {
		color: #E4C79B !important;
	}

	.bgcol4 {
		background: #E4C79B !important;
	}

	.swiper-item {
		position: relative;
		width: 750rpx;
		height: 396rpx;
		
		&-s1{
			background: #B25F05;
		}
		&-s2{
			background: #DB6307;
		}
		&-s3{
			background: #6560DD;
		}
		&-s4{
			background: #898484;
		}

		.hyimg {
			position: absolute;
			top: 0;
			left: 0;
			width: 750rpx;
			height: 396rpx;
			z-index: 1;
		}

		.hy-div {
			position: absolute;
			top: 0;
			left: 0;
			width: 750rpx;
			height: 396rpx;
			z-index: 2;
			padding: 60rpx 88rpx 62rpx 124rpx;

			.yxq {
				font-size: 22rpx;
				color: #B25F05;
			}

			.dengji {
				width: 128rpx;
				height: 36rpx;
				background: #FFFFFF;
				border-radius: 36rpx 0rpx 0rpx 36rpx;
				font-weight: bold;
				font-size: 22rpx;
				color: #75706A;
				line-height: 36rpx;
				text-align: center;
			}

			.hydj {
				font-weight: bold;
				font-size: 40rpx;
				color: #B25F05;
			}

			.hx {
				width: 504rpx;
				height: 2rpx;
				background: rgba(255, 255, 255, 0.6);
				border-radius: 6rpx 6rpx 6rpx 6rpx;
				margin-top: 10rpx;

				.hx1 {
					width: 160rpx;
					height: 2rpx;
					background: #C5730E;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
				}
			}

			.jilu {
				font-size: 18rpx;
				color: #000000;
				width: 112rpx;
				height: 40rpx;
				background: rgba(255, 255, 255, 0.6);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				line-height: 40rpx;
				text-align: center;
			}
		}
	}

	.youhui-div {
		width: 686rpx;
		// padding: 24rpx 28rpx;
		margin: 40rpx auto;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.yh-top {

			.yh-top-icon {
				width: 48rpx;
				height: 48rpx;
			}

			.yh-top-title {
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				margin-left: 12rpx;
			}

			.yh-top-jj {
				font-size: 24rpx;
				color: #AAAAAA;
				margin-left: 16rpx;
			}
		}

		.yh-top2 {
			width: 100%;
			height: 124rpx;
			background: linear-gradient(90deg, #D4F3E9 0%, #E6F9DB 100%);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			position: relative;
			padding: 24rpx 34rpx;
			margin-top: 24rpx;

			.yh-top2-img {
				position: absolute;
				right: 0;
				top: 0;
				height: 124rpx;
				width: 290rpx;
			}

			.yh-top2-title {
				font-weight: 600;
				font-size: 30rpx;
				color: #4D4D4D;
			}

			.yh-top2-jj {
				font-size: 20rpx;
				color: #4D4D4D;
				margin-top: 4rpx;
			}
		}

		.yh3-1 {
			width: 358rpx;
			height: 352rpx;
			padding: 30rpx 34rpx;
			background: linear-gradient(180deg, #FFF2CC 0%, #FFFBF0 100%);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			position: relative;

			.yh3-1-img {
				position: absolute;
				right: 0;
				bottom: 24rpx;
				height: 170rpx;
				width: 192rpx;
			}

			.yh3-1-title {
				font-weight: 500;
				font-size: 36rpx;
				color: #BF5B11;
			}

			.yh3-1-jj {
				font-size: 24rpx;
				color: #BF5B12;
				margin-top: 6rpx;
			}

			.yh3-1-btn {
				font-weight: 500;
				font-size: 18rpx;
				color: #FFFFFF;
				width: 98rpx;
				height: 34rpx;
				background: #DFA774;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				line-height: 34rpx;
				text-align: center;
				margin-top: 16rpx;
			}
		}

		.yh3-2 {
			padding: 20rpx 28rpx;
			width: 308rpx;
			height: 166rpx;
			background: linear-gradient(180deg, #FFEFEF 0%, #FEF7F7 100%);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			position: relative;

			.yh3-2-img {
				position: absolute;
				right: 0;
				bottom: 8rpx;
				height: 94rpx;
				width: 112rpx;
			}

			.yh3-2-title {
				font-weight: 500;
				font-size: 30rpx;
				color: #F93A1F;
			}

			.yh3-2-jj {
				font-size: 24rpx;
				color: #F93A1F;
				margin-top: 6rpx;
			}

			.yh3-2-btn {
				font-weight: 500;
				font-size: 18rpx;
				color: #FFFFFF;
				width: 98rpx;
				height: 34rpx;
				background: #FF1414;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				line-height: 34rpx;
				text-align: center;
				margin-top: 16rpx;
			}
		}

		.yh3-3 {
			padding: 30rpx 34rpx;
			width: 308rpx;
			height: 166rpx;
			background: linear-gradient(180deg, #EAF3FF 0%, #F6F9FF 100%);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			position: relative;

			.yh3-3-img {
				position: absolute;
				right: 0;
				bottom: 8rpx;
				height: 80rpx;
				width: 92rpx;
			}

			.yh3-3-title {
				font-weight: 500;
				font-size: 30rpx;
				color: #1D78E5;
			}

			.yh3-3-jj {
				font-size: 24rpx;
				color: #2680EB;
				margin-top: 6rpx;
			}

			.yh3-3-btn {
				font-weight: 500;
				font-size: 18rpx;
				color: #FFFFFF;
				width: 98rpx;
				height: 34rpx;
				background: #1D78E5;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				line-height: 34rpx;
				text-align: center;
				margin-top: 16rpx;
			}
		}
	}
</style>